<template>
	<view class="login">
		<view class="login_box">
			<view class="login_box_title">
				服务跟踪系统
			</view>

			<view class="login_box_form">
				<view class="login_box_form_ipt">
					<u-input v-model="loginData.username" clearable border="false" shape="circle"
						placeholder="请输入手机号/工号" style="height: 72rpx;">
						<image class="icon" slot="prefix" src="@/static/images/zhfl.png" mode=""></image>
					</u-input>
				</view>
				<view class="login_box_form_ipt">
					<u-input v-model="loginData.password" clearable border="false" shape="circle" :type="input_type"
						placeholder="请输入密码" style="height: 72rpx;">
						<image class="icon" slot="prefix" src="@/static/images/icon_default_password.png" mode="">
						</image>
						<view slot="suffix">
							<u-icon v-if="input_type == 'text'" @click="seePsd(2)" name="eye" color="#666666"
								size="48rpx"></u-icon>
							<u-icon v-else @click="seePsd(1)" name="eye-off" color="#666666" size="48rpx"></u-icon>
						</view>
					</u-input>
				</view>
				<view class="login_box_form_opt">
					<u-checkbox-group v-model="remember">
						<u-checkbox name="记住密码" labelColor="#333333" labelSize="26rpx" shape="circle"
							label="记住密码"></u-checkbox>
					</u-checkbox-group>
					<text style="color: #2979ff;">
						<!-- <text @click="$commonFn.Navto('/pages/login/register')">注册</text>
						<text>/</text>
						<text @click="$commonFn.Navto('/pages/login/setPassword')">忘记密码</text> -->
					</text>
				</view>
				<view class="login_box_form_btn" @click="handleLogin()">
					登录
				</view>
			</view>
		</view>
		<u-loading-page style="z-index: 99999;" loading-text="登录中" :loading="loading"></u-loading-page>
		<!-- <qrcode-image></qrcode-image> -->
	</view>
</template>

<script>
	import {login} from '@/common/api.js'

	export default {
		components: {
		},
		data() {
			return {
				loading: false,
				input_type: "password",
				remember: ['记住密码'],
				loginData: {
					username: "",
					password: "",
				},
				username: "",
				casUserName: "",
			}
		},
		onLoad(e) {
			
			// this.getStorage();
		},
		onReady() {
			
		},
		onShow() {
			uni.removeStorageSync('skey');
			uni.removeStorageSync('userinfo');
		},
		methods: {
		
			seePsd(type) {
				if (type == 1) {
					this.input_type = 'text'
				} else {
					this.input_type = 'password'
				}
			},
			async handleLogin() {
				let res = await login(this.loginData)
				
				if(res.code == '00000'){
					if (this.remember.length > 0) {
						uni.setStorageSync('loginData', JSON.stringify(this.loginData));
					} else {
						uni.removeStorageSync('loginData');
					}
					uni.setStorageSync('token', res.data.token);
					uni.setStorageSync('userInfo', res.data.user);
					uni.setStorageSync('roleKeys', res.data.roleKeys);
					
					this.$commonFn.msg('登录成功')
					// return
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}, 500);
				}
			},


		}
	}
</script>


<style>
	page {
		background-color: #f4f7ff;
	}
</style>
<style scoped lang="scss">
	.icon {
		width: 44rpx;
		height: 44rpx;
	}
	// 页面背景：改为纯净白色，弱化视觉干扰
	.login {
		height: calc(100vh - 44px);
		background-color: #f5f7fa;
		display: flex;
		justify-content: center;
		// align-items: center;
		background-color: #fff;
	}
	// 登录容器：简化为白色卡片，仅保留基础圆角
	.login_box {
		width: 680rpx;
		height: 680rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		margin-top: 120px;
	}
	// 系统标题：调整为简洁黑色，强化可读性
	.login_box_title {
		font-size: 48rpx;
		color: #333;
		font-weight: bold;
		text-align: center;
		margin-bottom: 60rpx;
	}
	// 表单区域：优化输入框与按钮的简约感
	.login_box_form {
		&_ipt {
			margin-bottom: 30rpx;
			::v-deep .u-input {
				background-color: #f5f7fa;
				border-radius: 12rpx;
				color: #333 !important;
				placeholder {
					color: #999 !important;
				}
			}
		}
		&_opt {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 40rpx;
			::v-deep .u-checkbox {
				.checkbox__icon {
					border-color: #ddd !important;
				}
				.checkbox__icon--checked {
					background-color: #409eff !important;
					border-color: #409eff !important;
				}
			}
		}
		&_btn {
			background-color: #409eff;
			border-radius: 12rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			transition: opacity 0.2s;
			&:hover {
				opacity: 0.9;
			}
		}
	}
</style>